<template>
  <el-container class="app-container">
    <!-- 顶部导航栏 -->
    <el-header class="app-header">
      <div class="header-left">
        <!-- Logo和系统标题 -->
        <div class="logo">
          <el-icon class="logo-icon"><FolderOpened /></el-icon>
          <span class="logo-text">希能文档管理系统</span>
        </div>
      </div>
      
      <div class="header-center">
        <!-- 全局搜索框 -->
        <div class="global-search">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索文档、项目、标签..."
            class="search-input"
            clearable
            @input="handleSearch"
            @keyup.enter="performSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          
          <!-- 搜索建议下拉 -->
          <div v-if="showSuggestions && searchSuggestions.length" class="search-suggestions">
            <div
              v-for="(suggestion, index) in searchSuggestions"
              :key="index"
              class="suggestion-item"
              @click="selectSuggestion(suggestion)"
            >
              <el-icon><Search /></el-icon>
              <span>{{ suggestion }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="header-right">
        <!-- 通知和用户菜单 -->
        <el-badge :value="3" class="notification-badge">
          <el-button circle>
            <el-icon><Bell /></el-icon>
          </el-button>
        </el-badge>
        
        <el-dropdown trigger="click" class="user-dropdown">
          <div class="user-info">
            <el-avatar size="small" class="user-avatar">
              <el-icon><User /></el-icon>
            </el-avatar>
            <span class="user-name">张经理</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <el-icon><User /></el-icon>
                个人中心
              </el-dropdown-item>
              <el-dropdown-item>
                <el-icon><Setting /></el-icon>
                系统设置
              </el-dropdown-item>
              <el-dropdown-item divided>
                <el-icon><SwitchButton /></el-icon>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <el-container class="main-container">
      <!-- 左侧导航菜单 -->
      <el-aside class="app-sidebar" :width="isCollapsed ? '64px' : '240px'">
        <div class="sidebar-toggle">
          <el-button 
            text 
            @click="toggleSidebar"
            class="toggle-btn"
          >
            <el-icon><Fold v-if="!isCollapsed" /><Expand v-else /></el-icon>
          </el-button>
        </div>
        
        <el-menu
          :default-active="activeMenu"
          class="sidebar-menu"
          :collapse="isCollapsed"
          router
        >
          <el-menu-item
            v-for="route in menuRoutes"
            :key="route.path"
            :index="route.path"
          >
            <el-icon><component :is="route.meta.icon" /></el-icon>
            <template #title>{{ route.meta.title }}</template>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容区域 -->
      <el-main class="app-main">
        <div class="main-content">
          <router-view />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useDocumentStore } from '@/store/document'
import { 
  FolderOpened, Search, Bell, User, Setting, SwitchButton, 
  Fold, Expand, House, Document, DataLine
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const documentStore = useDocumentStore()

// 响应式数据
const searchKeyword = ref('')
const showSuggestions = ref(false)
const isCollapsed = ref(false)

// 搜索建议数据
const searchSuggestions = ref([
  'FMD血流检测',
  'MMC项目',
  '欧姆龙血压计',
  '培训考试',
  '技术方案',
  '投标书',
  '智众医信',
  'SaaS平台',
  '设备采购',
  '评分标准'
])

// 计算属性
const activeMenu = computed(() => route.path)

const menuRoutes = computed(() => [
  {
    path: '/dashboard',
    meta: { title: '工作台', icon: 'House' }
  },
  {
    path: '/documents',
    meta: { title: '文档管理', icon: 'Document' }
  },
  {
    path: '/projects',
    meta: { title: '项目管理', icon: 'FolderOpened' }
  },
  {
    path: '/search',
    meta: { title: '高级搜索', icon: 'Search' }
  },
  {
    path: '/analytics',
    meta: { title: '数据统计', icon: 'DataLine' }
  },
  {
    path: '/settings',
    meta: { title: '系统设置', icon: 'Setting' }
  }
])

// 方法
const toggleSidebar = () => {
  isCollapsed.value = !isCollapsed.value
}

let searchTimer = null
const handleSearch = (value) => {
  clearTimeout(searchTimer)
  
  if (!value.trim()) {
    showSuggestions.value = false
    return
  }
  
  searchTimer = setTimeout(() => {
    // 过滤搜索建议
    const filtered = searchSuggestions.value.filter(item =>
      item.toLowerCase().includes(value.toLowerCase())
    )
    searchSuggestions.value = filtered.slice(0, 5)
    showSuggestions.value = filtered.length > 0
  }, 200)
}

const selectSuggestion = (suggestion) => {
  searchKeyword.value = suggestion
  showSuggestions.value = false
  performSearch()
}

const performSearch = () => {
  if (!searchKeyword.value.trim()) return
  
  showSuggestions.value = false
  
  // 执行搜索
  documentStore.searchDocuments(searchKeyword.value)
  
  // 跳转到搜索结果页
  if (route.path !== '/search') {
    router.push('/search')
  }
}

// 点击外部关闭搜索建议
const handleClickOutside = (event) => {
  const searchContainer = event.target.closest('.global-search')
  if (!searchContainer) {
    showSuggestions.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

watch(() => route.path, () => {
  showSuggestions.value = false
})
</script>

<style lang="scss" scoped>
.app-container {
  height: 100vh;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-light);
  position: relative;
  z-index: 1000;
}

.header-left {
  display: flex;
  align-items: center;
  
  .logo {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--el-color-primary);
    
    .logo-icon {
      margin-right: 8px;
      font-size: 24px;
    }
    
    .logo-text {
      white-space: nowrap;
    }
  }
}

.header-center {
  flex: 1;
  max-width: 600px;
  margin: 0 40px;
  position: relative;
  
  .global-search {
    position: relative;
    
    .search-input {
      width: 100%;
      
      :deep(.el-input__inner) {
        border-radius: 20px;
        background: var(--el-fill-color-lighter);
        border: 1px solid transparent;
        transition: all 0.3s;
        
        &:focus {
          background: var(--el-bg-color);
          border-color: var(--el-color-primary);
        }
      }
    }
    
    .search-suggestions {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--el-bg-color);
      border: 1px solid var(--el-border-color);
      border-radius: 8px;
      box-shadow: var(--el-box-shadow);
      z-index: 2000;
      max-height: 200px;
      overflow-y: auto;
      
      .suggestion-item {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        cursor: pointer;
        transition: background-color 0.2s;
        
        &:hover {
          background: var(--el-fill-color-light);
        }
        
        .el-icon {
          margin-right: 8px;
          color: var(--el-text-color-secondary);
        }
      }
    }
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  
  .notification-badge {
    .el-button {
      color: var(--el-text-color-regular);
    }
  }
  
  .user-dropdown {
    cursor: pointer;
    
    .user-info {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 8px;
      border-radius: 6px;
      transition: background-color 0.2s;
      
      &:hover {
        background: var(--el-fill-color-light);
      }
      
      .user-name {
        font-size: 14px;
        color: var(--el-text-color-regular);
      }
    }
  }
}

.main-container {
  height: calc(100vh - 60px);
}

.app-sidebar {
  background: var(--el-bg-color);
  border-right: 1px solid var(--el-border-color-light);
  transition: width 0.3s;
  
  .sidebar-toggle {
    padding: 16px;
    text-align: center;
    border-bottom: 1px solid var(--el-border-color-lighter);
    
    .toggle-btn {
      width: 100%;
      color: var(--el-text-color-regular);
    }
  }
  
  .sidebar-menu {
    border-right: none;
    
    .el-menu-item {
      margin: 4px 8px;
      border-radius: 6px;
      
      &:hover {
        background: var(--el-fill-color-light);
      }
      
      &.is-active {
        background: var(--el-color-primary-light-9);
        color: var(--el-color-primary);
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 3px;
          background: var(--el-color-primary);
        }
      }
    }
  }
}

.app-main {
  background: var(--el-bg-color-page);
  padding: 0;
  overflow: hidden;
  
  .main-content {
    height: 100%;
    overflow: auto;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .header-center {
    margin: 0 20px;
  }
  
  .header-left .logo .logo-text {
    display: none;
  }
  
  .app-sidebar {
    position: fixed;
    z-index: 1001;
    height: calc(100vh - 60px);
  }
  
  .app-main {
    margin-left: 0 !important;
  }
}
</style>